<template>
    <div class="index clearafter">
        <module-head></module-head>
        <div class="content flex">
            <div class="w220">
                <menu-list></menu-list>
            </div>
            <div class="w980 flex_full">
              <p class="flex flex_vcenter pdb20">
                <i class="titleTag"></i>
                <span class="fRedBig">菜单管理</span>
              </p>
                <div class="menuset_con">
                    <div class="menuset_con_left col-md-4">
                        <form class="form-horizontal" role="form">
                            <div class="form-group">
                                <label class="col-md-4 control-label">产品名称:</label>
                                <div class="col-md-8">
                                    <select class="form-control" v-model="proitem">
                                        <option v-for="(index,item) in prolists" value="{{item.code+'/'+item.pCode+'/'+item.name}}">{{item.name}}</option>
                                    </select>
                                </div>
                            </div>
                        </form>
                        <div class="treecon">
                            <ul id="treeDemo" class="ztree"></ul>
                        </div>
                    </div>
                    <div class="menuset_con_right col-md-8">
                        <div class="form-group fr">
                            <button class="default ok" @click="menumoduleshow">菜单对应模块设置</button>
                        </div>
                        <form class="form-horizontal cb" role="form" id="vipTypePre" v-on:submit.prevent="savemenu">
                            <div class="menudetailform">
                                <div class="form-group">
                                    <label class="col-md-3 control-label">产品编码:</label>
                                    <div class="col-md-8">
                                        <input type="text" class="form-control" disabled v-model="savedata.productCode" />
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-md-3 control-label">菜单名称:<span class="start">*</span> </label>
                                    <div class="col-md-8">
                                        <input type="text" class="form-control" v-model="savedata.menuName" required />
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-md-3 control-label">上级菜单:</label>
                                    <div class="col-md-8">
                                        <input type="text" class="form-control" disabled v-model="savedata.pmenuName" />
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-md-3 control-label">排序:<span class="start">*</span> </label>
                                    <div class="col-md-8">
                                        <input type="text" class="form-control" v-model="savedata.menuOrder" placeholder="请输入1-99的数字" required/>
                                    </div>
                                </div>
                                <div class="form-group" id="icon">
                                    <label class="col-md-3 control-label">图标文件:</label>
                                    <div class="col-md-8">
                                        <img-upload-btn :imgurl="imgurl"></img-upload-btn>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-md-3 control-label">备注说明:</label>
                                    <div class="col-md-8">
                                        <textarea class="form-control" rows="3" v-model="savedata.menuDesc"></textarea>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <button class="default blue center">保存</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal fade bs-example-modal-lg" id="menumodule" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title" id="myModalLabel">菜单对应模块设置</h4>
                    </div>
                    <div class="modal-body">
                        <div class="menuset_con menuset_con2">
                            <!-- <div class="menuset_con_left col-md-3">
                                <div class="treecon">
                                    <h3>请先双击模块名</h3>
                                    <ul>
                                        <li class="active">便捷寻医</li>
                                        <li>便捷寻医</li>
                                        <li>便捷寻医</li>
                                        <li>便捷寻医</li>
                                        <li>便捷寻医</li>
                                    </ul>
                                </div>
                            </div> -->
                            <div class="menuset_con_right col-md-12">
                                <table class="table table-hover">
                                    <thead>
                                        <tr>
                                            <th class="text-center">菜单名称</th>
                                            <th class="text-center">菜单备注</th>
                                            <th class="text-center">模块名称</th>
                                            <th class="text-center">操作</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr class="text-center" v-for="(index,item) in menulist" track-by="id">
                                            <td>{{item.name}}</td>
                                            <td>{{item.menuDesc}}</td>
                                            <td>{{item.moduleIdText}}</td>
                                            <td align="left"><span class="glyphicon glyphicon-pencil" @click="connetmodule(item)"></span><span @click="delemodule(item)" class="glyphicon glyphicon-trash" v-show="item.moduleIdText!=''"></span></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    <!-- <div class="modal-footer savebtn">
                        <button type="submit" class="default ok center">确认</button>
                    </div> -->
                </div>
                <!-- /.modal-content -->
            </div>
            <!-- /.modal -->
        </div>
        <div id="rMenu">
            <ul>
                <li id="m_add" @click="addTreeNode();">新增下级</li>
                <li id="m_del" @click="removeTreeNode();">删除</li>
                <!--  <li id="m_check" onclick="checkTreeNode(true);">Check节点</li>
                    <li id="m_unCheck" onclick="checkTreeNode(false);">unCheck节点</li> -->
                <!-- <li id="m_edit" @click="editTree();">修改</li> -->
            </ul>
        </div>
        <!-- 修改新增对应 -->
        <div class="modal fade" id="myModal-connetmodule" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title" id="myModalLabel">请选择模块</h4>
                    </div>
                    <form class="form-horizontal cb" role="form" id="selectmodule" v-on:submit.prevent="selectmodule">
                        <div class="modal-body cbafter">
                            <div class="form-group">
                                <label class="col-md-3 control-label">菜单名称:</label>
                                <div class="col-md-8">
                                    <input type="text" class="form-control" disabled v-model="currentmenu.name" />
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-md-3 control-label">模块名称:</label>
                                <div class="col-md-8" id="zhuguanyis">
                                    <input type="hidden" class="form-control" placeholder="" v-model="currentmoduleId">
                                    <input type="text" class="form-control" v-model="currentmoduleName" required>
                                    <div class="yishenglist">
                                        <p @click="mayclick()">清空搜索内容</p>
                                        <p @click="mayclick(item,$event)" v-for="item in  modulelist | filterBy currentmoduleName in 'moduleName'">{{item.moduleName}}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="submit" class="default blue center">确认</button>
                        </div>
                    </form>
                </div>
                <!-- /.modal-content -->
            </div>
            <!-- /.modal -->
        </div>
        <!-- 删除对应 -->
        <div class="modal fade" id="myModal-delemodule" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-body cbafter">
                        <p class="text-center">确认删除菜单：<span class="red">{{currentmenu.name}}</span>的对应模块？</p>
                    </div>
                    <div class="modal-footer">
                        <div class="centerbutton">
                            <button @click="confirmdelemodule" class="default cancel center">确认删除</button>
                            <button type="button" class="default greynobg center " data-dismiss="modal" aria-hidden="true">取消</button>
                        </div>
                    </div>
                </div>
                <!-- /.modal-content -->
            </div>
            <!-- /.modal -->
        </div>
    </div>
</template>
<script>
import 'assets/lib/bootstrap-3.3.2/css/bootstrap.min.css'
import 'assets/lib/bootstrap-3.3.2/js/bootstrap.min.js'
import 'assets/lib/ztree/css/zTreeStyle/zTreeStyle.css'
import 'assets/reset.css'
import 'assets/lib/ztree/js/jquery.ztree.core.min.js'
import 'assets/lib/ztree/js/jquery.ztree.exedit.js'
import moduleHead from 'components/module-head'
import menuList from 'components/menu-list'
import ImgUploadBtn from 'components/ImgUploadBtn.vue'
import Public from 'assets/public.js'
export default {
    data() {
            return {
                prolists: [],
                proitem: "",
                savedata: {
                    "menuDesc": "", //备注
                    "menuIconId": 0, //图标文件ID
                    "menuName": "", //菜单名称
                    "menuOrder": "", //排序：相同层级下排序应唯一
                    "menuPid": "", //上级菜单ID
                    "menuId": 0,
                    "productCode": "" //租户产品编码
                },
                imgurl: "",
                menulist: [],
                modulelist: [],
                optstr: "",
                currentmenu: {
                    id: "",
                    moduleId: "",
                    moduleIdText: "",
                    name: "",
                    pId: "",
                    productCode: "",
                },
                currentmoduleId: "",
                currentmoduleName: "",
                nodeleid: "",
                setting: {
                    data: {
                        simpleData: {
                            enable: true
                        }
                    },
                    view: {
                        dblClickExpand: false
                    },
                    check: {
                        enable: true
                    },
                    callback: {
                        onRightClick: this.OnRightClick,
                        onClick: this.zTreeOnClick,
                    }
                },
                zTree: {},
                zNodes: [],
                curcode:"",
                curpcode:"",


            }
        },
        computed: {

        },
        components: {
            moduleHead, menuList, ImgUploadBtn
        },
        ready() {
            var that = this;
            //获取产品名称列表 下拉框中的
            $.when(Public.commonajax("base.tenantProductsService", "queryProductTenantByPcode", "[null]"))
                .done(function(res) {
                    if (res.code == 200) {
                        that.prolists = res.body;
                        that.proitem = that.prolists[0].code + '/' + that.prolists[0].pCode + '/' + that.prolists[0].name
                    }

                });

        },
        methods: {
            getmenumodule() {
                    var that = this;
                    $.when(Public.commonajax("base.menuService", "queryByCodeAndPcode", this.optstr))
                        .done(function(res) {
                            if (res.code == 200) {

                                that.menulist = res.body;
                            }

                        })
                },
                // 菜单对应模块设置弹框
                menumoduleshow() {
                    var that=this;
                    $("#menumodule").modal("show");
                    //获取模块列表
                    var opt=`['${this.curcode}','${this.curpcode}','']`;
                    $.when(Public.commonajax("base.moduleService", "queryModuleListByProductCode", opt))
                        .done(function(res) {
                            if (res.code == 200) {
                                that.modulelist = res.body;
                            }
                        })
                    // this.getmenumodule();

                },
                // 增加菜单树节点
                addTreeNode() {
                    this.hideRMenu();
                    this.savedata = {
                        "menuDesc": "", //备注
                        "menuIconId": 0, //图标文件ID
                        "menuName": "", //菜单名称
                        "pmenuName": this.zTree.getSelectedNodes()[0].name, //菜单名称
                        "menuOrder": "", //排序：相同层级下排序应唯一
                        "menuPid": this.zTree.getSelectedNodes()[0].id, //上级菜单ID
                        "productCode": this.zTree.getSelectedNodes()[0].productCode //租户产品编码
                    }
                    this.imgurl = "";
                    this.$broadcast("imgurl", this.imgurl);
                },

                // 删除菜单树节点
                removeTreeNode() {
                    var that = this;
                    this.hideRMenu();
                    var nodes = this.zTree.getSelectedNodes();
                    $.when(Public.commonajax("base.menuService", "deleteMenu", "['" + nodes[0].id + "']"))
                        .done(function(res) {
                            if (res.code == 200) {
                                Public.ajaxPrompt("删除成功");
                                that.zTree.removeNode(nodes[0]);
                                that.savedata = {
                                    "menuDesc": "", //备注
                                    "menuIconId": 0, //图标文件ID
                                    "menuName": "", //菜单名称
                                    "pmenuName": "", //菜单名称
                                    "menuOrder": "", //排序：相同层级下排序应唯一
                                    "menuPid": "", //上级菜单ID
                                    "productCode": "" //租户产品编码
                                }
                                that.imgurl = "";
                                that.$broadcast("imgurl", this.imgurl);
                            } else {
                                Public.ajaxPrompt(res.msg);
                            }

                        })
                },
                // 左键编辑菜单树节点
                zTreeOnClick(event, treeId, treeNode) {
                    var that = this;
                    if (treeNode.level == 0 || treeNode.productCode == this.nodeleid) {
                        this.zTree.cancelSelectedNode();
                        Public.ajaxPrompt("本节点不能修改");
                    } else {
                        var temid = this.zTree.getSelectedNodes()[0].id;
                        //根据menuid查询菜单详情
                        $.when(Public.commonajax("base.menuService", "getByMenuId", "['" + temid + "']"))
                            .done(function(res) {
                                if (res.code == 200) {
                                    that.savedata = {
                                        "menuDesc": res.body.menuDesc, //备注
                                        "menuIconId": res.body.menuIconId, //图标文件ID
                                        "menuName": res.body.menuName, //菜单名称
                                        "pmenuName": res.body.pMenuName, //菜单名称
                                        "menuOrder": res.body.menuOrder, //排序：相同层级下排序应唯一
                                        "menuPid": res.body.menuPid, //上级菜单ID
                                        "productCode": res.body.productCode, //产品编码
                                        menuId: res.body.menuId
                                    };
                                    that.imgurl = Public.IMGVIEW_URL() + res.body.menuIconId;
                                    console.log(that.imgurl);
                                    that.$broadcast("imgurl", that.imgurl);


                                }

                            })
                    }
                },
                OnRightClick(event, treeId, treeNode) {
                    if (treeNode.level == 0) {
                        this.showRMenu("root", event.clientX, event.clientY);
                    } else if (treeNode.productCode == this.nodeleid) {
                        this.zTree.cancelSelectedNode();
                    } else if (treeNode.level > 1) {
                        this.showRMenu("noadd", event.clientX, event.clientY);
                    } else {
                        this.showRMenu("node", event.clientX, event.clientY);
                    }
                    this.zTree.selectNode(treeNode);
                },
                showRMenu(type, x, y) {
                    $("#rMenu ul").show();
                    if (type == "root") {
                        $("#m_del").hide();
                        $("#m_add").show();
                    } else if (type == "noadd") {
                        $("#m_del").show();
                        $("#m_add").hide();

                    } else {
                        $("#m_del").show();
                        $("#m_add").show();

                    }
                    $("#rMenu").css({
                        "top": y + "px",
                        "left": x + "px",
                        "visibility": "visible"
                    });

                    $("body").bind("mousedown", this.onBodyMouseDown);
                },
                hideRMenu() {
                    $("#rMenu").css({
                        "visibility": "hidden"
                    })
                    $("body").unbind("mousedown", this.onBodyMouseDown);
                },
                onBodyMouseDown(event) {
                    if (!(event.target.id == "rMenu" || $(event.target).parents("#rMenu").length > 0)) {
                        $("#rMenu").css({
                            "visibility": "hidden"
                        });
                    }
                },
                // 保存菜单新增或者修改
                savemenu() {
                    var that = this;
                    var reg = /^[1-9][0-9]?$/;
                    if (!reg.test(this.savedata.menuOrder)) {
                        Public.ajaxPrompt("排序数字只能在1-99之间");
                        return
                    }

                    $.when(Public.commonajax("base.menuService", "saveMenu", "[" + JSON.stringify(that.savedata) + "]"))
                        .done(function(res) {
                            if (res.code == 200) {
                                Public.ajaxPrompt("保存成功");
                                if (that.savedata.menuId) {
                                    that.zTree.getSelectedNodes()[0].name = res.body.menuName;
                                    that.zTree.updateNode(that.zTree.getSelectedNodes()[0]);

                                } else {
                                    var newNode = {
                                        id: res.body.menuId,
                                        isParent: false,
                                        pId: res.body.menuPid,
                                        productCode: res.body.productCode,
                                        name: res.body.menuName
                                    }
                                    that.zTree.addNodes(that.zTree.getSelectedNodes()[0], newNode);
                                }
                                // that.savedata = {
                                //     "menuDesc": "", //备注
                                //     "menuIconId": "", //图标文件ID
                                //     "menuName": "", //菜单名称
                                //     "menuOrder": "", //排序：相同层级下排序应唯一
                                //     "menuPid": "", //上级菜单ID
                                //     "menuId": 0,
                                //     "productCode": "" //租户产品编码
                                // };
                                // that.imgurl = "";
                                // that.$broadcast("imgurl", that.imgurl);
                            } else {
                                Public.ajaxPrompt(res.msg);
                            }

                        })
                },
                // 点击菜单选择模块弹窗
                connetmodule(item) {
                    var that = this;
                    $("#myModal-connetmodule").modal("show");
                    this.currentmenu = item;
                    this.currentmoduleId = item.moduleId;
                    this.currentmoduleName = item.moduleIdText;




                },
                // 选择模块
                selectmodule() {
                    var that = this;
                    $.when(Public.commonajax("base.menuService", "saveMenuAndModuleRelation", "['" + this.currentmenu.id + "','" + this.currentmoduleId + "']"))
                        .done(function(res) {
                            if (res.code == 200) {
                                Public.ajaxPrompt("对应成功");
                                $("#myModal-connetmodule").modal("hide");
                                that.getmenumodule();
                            } else {
                                Public.ajaxPrompt(res.msg);
                            }

                        })
                },
                // 删除模块弹框
                delemodule(item) {
                    var that = this;
                    $("#myModal-delemodule").modal("show");
                    this.currentmenu = item;
                },
                //确认删除
                confirmdelemodule() {
                    var that = this;
                    $.when(Public.commonajax("base.menuService", "deleteMenuAndModuleRelation", "['" + this.currentmenu.id + "']"))
                        .done(function(res) {
                            if (res.code == 200) {
                                Public.ajaxPrompt("删除成功");
                                $("#myModal-delemodule").modal("hide");
                                that.getmenumodule();
                            } else {
                                Public.ajaxPrompt(res.msg);
                            }

                        })
                },
                // 搜索模块下拉框选中后赋值给input
                mayclick(item, event) {
                    console.log(item);
                    if (item) {
                        this.currentmoduleId = item.moduleId;
                        this.currentmoduleName = item.moduleName;

                    } else {
                        this.currentmoduleId = "";
                        this.currentmoduleName = "";

                    }
                    console.log(this.currentmoduleId);
                    $(".yishenglist").hide();

                },



        },
        events: {
            //图标文件
            'serviceIconId' (serviceIconId) {
                this.savedata.menuIconId = serviceIconId;
            }
        },
        watch: {
            'proitem': function(val, oldval) {
                var that = this;
                var strarr = val.split("/"),
                    code = strarr[0],
                    pcode = strarr[1],
                    selectname = strarr[2];
                    this.curcode=strarr[0];
                    this.curpcode=strarr[1]
                this.nodeleid = strarr[1]
                var optstr = `['${code}','${pcode}',false]`;
                this.optstr = optstr;
                $.when(Public.commonajax("base.menuService", "queryByCodeAndPcode", optstr))
                    .done(function(res) {
                        if (res.code == 200) {
                            var temobj = {
                                id: -1,
                                isParent: true,
                                pId: 0,
                                productCode: code,
                                name: selectname,
                                open: true
                            };
                            that.menulist = res.body;
                            res.body.unshift(temobj);
                            that.zNodes = res.body;

                            $.fn.zTree.init($("#treeDemo"), that.setting, that.zNodes);
                            that.zTree = $.fn.zTree.getZTreeObj("treeDemo");
                        }

                    })

            }
        }
}



$(function() {

    $("#zhuguanyis").find('input').on('click', function(event) {
        event.preventDefault();
        $(".yishenglist").show();
    });
    //解决修改菜单对应模块的弹框关闭的时候下拉框隐藏
    $('#myModal-connetmodule').on('hidden.bs.modal', function(e) {
        $(".yishenglist").hide();
    })
})
</script>
<style scoped>
.menuset_con {
    width: 950px;
    min-height: 644px;
    height: auto!important;
    border: 1px solid #e6e6e6;
    border-radius: 10px;
    padding-top: 30px;
    background-color: #fafafa;
}

.menuset_con_left {
    border-radius: 0 0 10px 0;
    max-height: 600px;
    overflow: auto
}

.menuset_con_right {
    border-radius: 0 0 10px 0;
}

.menudetailform,
.treecon {
    border: 1px solid #ccc;
    padding: 20px 10px
}

#add {
    background: url(../../assets/img/add2.png) no-repeat 5px center;
    padding-left: 25px !important;
    cursor: pointer !important;
}

#delete {
    background: url(../../assets/img/dele3.png) no-repeat 5px center;
    padding-left: 25px !important;
    cursor: pointer !important;
}

div#rMenu {
    position: absolute;
    visibility: hidden;
    top: 0;
    background-color: #fafafa;
    text-align: left;
    padding: 2px;
    border: 1px solid #e6e6e6;
    padding: 10px
}

div#rMenu ul li {
    margin: 1px 0;
    padding: 5px 10px;
    cursor: pointer;
    list-style: none outside none;
    /* background-color: #DFDFDF;*/
}

div#rMenu ul li:nth-child(1) {
    background: url(../../assets/img/add2.png) no-repeat 10px center;
    padding-left: 35px;
    cursor: pointer;
}

div#rMenu ul li:nth-child(2) {
    background: url(../../assets/img/dele3.png) no-repeat 10px center;
    padding-left: 35px;
    cursor: pointer;
}

div#rMenu ul li:nth-child(3) {
    background: url(../../assets/img/refresh.png) no-repeat 10px center;
    padding-left: 35px;
    cursor: pointer;
}

.menuset_con2 {
    width: 100%;
    min-height: 400px;
    height: auto!important;
    border: none;
    border-radius: 0;
    padding-top: 30px;
    background-color: #fff;
}

.menuset_con2 .menuset_con_left {
    text-align: center;
}

.menuset_con2 .menuset_con_left h3 {
    font-size: 16px;
    line-height: 50px
}

.menuset_con2 .menuset_con_left ul li {
    line-height: 30px;
    height: 30px;
    width: 100px;
    margin: 0 auto;
}

.menuset_con2 .menuset_con_left ul li.active {
    background: #1dc499;
    border-radius: 15px;
    color: #fff
}

.menuset_con2 .menuset_con_right table th {
    background: #1dc499;
    color: #fff
}

.menuset_con2 .menuset_con_right span {
    color: #1dc499;
    margin-left: 15px;
}

.menuset_con2 .menuset_con_right span:hover {
    cursor: pointer;
}

.menuset_con2 .menuset_con_right span.glyphicon-trash {
    color: #f86448
}

#zhuguanyis {
    position: relative;
}

#zhuguanyis .yishenglist {
    position: absolute;
    display: none;
    left: 0;
    top: 32px;
    z-index: 9;
    width: 100%;
    height: 300px;
    overflow: auto;
    -webkit-box-shadow: 0 0 10px rgba(230, 230, 230, .9);
    -moz-box-shadow: 0 0 10px rgba(230, 230, 230, .9);
    box-shadow: 0 0 10px rgba(230, 230, 230, .9);
    background: #fff;
    border-radius: 0 0 10px 10px;
    padding: 10px
}

#zhuguanyis .yishenglist p {
    line-height: 26px;
    height: 26px;
    margin-top: 5px;
    background: #f1f1f1;
    padding-left: 10px
}

#zhuguanyis .yishenglist p:nth-child(1) {
    background: #1dc499;
    color: #fff
}

#menumodule .modal-body {
    height: 500px;
    overflow: auto;
}

span.red {
    font-weight: bold;
    color: #f86448
}

.centerbutton {
    width: 280px;
    margin: 0 auto;
}

.centerbutton button {
    margin-left: 5px;
    display: inline-block;
}
</style>
